<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>设置</title>
    <link rel="stylesheet" href="../common/style/reset.css" />
    <style>
      .img-pendant-title {
        margin: 10px 0;
      }

      input {
        border: none;
        outline: none;
        height: 25px;
        line-height: 25px;
        padding: 0 10px;
        border-radius: 5px;
        width: 60%;
      }

      .upload {
        width: 100px;
        height: 30px;
        line-height: 30px;
        border: none;
        outline: none;
        border-radius: 5px;
        background-color: rgb(107, 44, 255);
        color: #fff;
        font-size: 14px;
      }

      ul li {
        /* text-align: center; */
      }

      .size-box{
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        /* justify-content: center; */
      }
      .size-box p {
        margin: 5px 10px;
        padding: 5px 10px;
        background-color: rgb(107, 44, 255);
        color: #fff;
        border-radius: 5px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <tab-win>
      <ul>
        <li>
          <div class="img-pendant-title">是否开启轮播</div>
          <liu-switch class="liu-switch"></liu-switch>
        </li>
        <li>
          <div class="img-pendant-title">轮播切换时间(分钟)</div>
          <input type="number" value="1" />
        </li>
        <li>
          <div class="img-pendant-title">上传图片(ctl多选)</div>
          <button class="upload">上传</button>
        </li>
        <li>
          <div class="img-pendant-title">尺寸</div>
          <div class="size-box">
            <p size="2/2">2x2</p>
            <p size="4/2">4x2</p>
            <p size="3/2">3x2</p>
          </div>
        </li>
      </ul>
    </tab-win>
  </body>
  <script type="module">
    import LiuSwitch from "../components/Switch.js";
    import TabWin from "../components/Window.js";

    import { debounce } from '../common/utils/utils.js'

    customElements.define("liu-switch", LiuSwitch);
    customElements.define("tab-win", TabWin);

    if(window.ipcRenderer){
      window.ipcRenderer.on("init", (event, initData) => {
        data = {
          ...initData,
          urls: []
        }
        render()
      });
    }

    let data = {
      delay: 1 * 60 * 1000,
      urls: [],
      switch: false,
      num: false,
    };

    const uploadEl = document.querySelector(".upload");
    const switchEl = document.querySelector(".liu-switch");
    const delayEl = document.querySelector("input[type=number]");
    const sizeEl = document.querySelector(".size-box");

    const sendData = (data) => {
      ipcRenderer.sendTo(window.senderId, 'sendData', data);
    }

    const setSize = (data) => {
      ipcRenderer.sendTo(window.senderId, 'setSize', {
        width: data.width * 100,
        height: data.height * 100
      });
    }

    switchEl.addEventListener("change", (e) => {
      data.switch = e.detail.checked;
      data.num = false;
      sendData(data);
    });

    delayEl.addEventListener("input", debounce((e)=>{
      
      if(e.target.value){
        let num = parseInt(e.target.value)
        data.delay = num * 60 * 1000
        data.num = false;
        sendData(data)
      }
    }, 1000))

    uploadEl.addEventListener("click", () => {
      if (window.utools) {
        let files = window.utools.showOpenDialog({
          filters: [ { name: 'Images', extensions: ['jpg', 'png', 'gif', 'webp', 'jpeg']}],
          properties: ["openFile", "multiSelections"],
        });
        data.num = true;
        sendData({
          ...data,
          urls: files
        })
      }
    });

    const render = () => {
      switchEl.setAttribute('checked', data.switch)
      delayEl.value = data.delay / (60 * 1000)
    }

    sizeEl.addEventListener('click', (e) => {
      if(!e.target.getAttribute('size'))return
      let [width, height] = e.target.getAttribute('size').split('/')
      setSize({
        width,
        height
      })
    })
  </script>
</html>
